<template>
  <div class="data-v-loading6" :style="hostSty">
    <div class="bar">
      <div class="bar-inner" :style="barSty"></div>
    </div>
    <div class="text">
      {{ percent }} 进行中 <span class="text-dot">{{ dot }}</span>
    </div>
  </div>
</template>

<script>
import Circle from "./Circle";
import Color from "color-js";
export default {
  name: "data-v-loading6",
  props: ["percentage", "color"],
  computed: {
    percent() {
      return Math.round(this.percentage * 100) + "%";
    },
    hostSty() {
      let lightColor = Color(this.color).darkenByAmount(0.05).toCSS();

      return {
        "--color": this.color,
        "--color-line": this.color,
        "--color-bg": `linear-gradient(to bottom, ${this.color},  ${lightColor},  ${this.color})`,
      };
    },
    barSty() {
      return {
        width: this.percent
      };
    }
  },

  data() {
    return {
      dot: "",
      barNums: 60
    };
  },

  methods: {},

  created() {
    this.timer = setInterval(() => {
      this.dot += ".";
      if (this.dot.length > 3) {
        this.dot = "";
      }
    }, 500);
  },

  mounted() {},

  destroyed() {}
};
</script>

<style lang="less">
@color-gray: rgba(255, 255, 255, 0.8);

.data-v-loading6 {
  width: 312px;
  height: 50px;
  margin: 0 10px;
  display: inline-block;
  // outline: 1px solid lightpink;

  .text {
    height: 20px;
    position: relative;
    font-size: 12px;
    color: @color-gray;
    .text-dot {
      display: inline-block;
      width: 25px;
      text-align: left;
    }
  }

  .bar {
    height: 18px;
    border: 1px solid var(--color);

    .bar-inner {
      height: 14px;
      margin: 1px;
      background: var(--color-bg);
      transition: 0.25s;
    }
  }
}
</style>
